<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false" :default-active="route.name"
          @select="handleSelect">
          <el-menu-item class="logo" style="display: flex;align-items: center;">
            <img style="width: 30px" src="/src/assets/logo.png" alt="CodeRush logo" />
            <div class="application-name" style="margin-left: 10px;"> <strong>CodeRush 刷题平台</strong> </div>
          </el-menu-item>
          <el-menu-item index="index" @Click="router.push({ 'name': 'index' })">主页</el-menu-item>
          <el-menu-item index="banks" @Click="router.push({ 'name': 'banks' })">题库</el-menu-item>
          <el-menu-item index="questions" @Click="router.push({ 'name': 'questions' })">题目</el-menu-item>
          <el-menu-item index="chat" @Click="router.push({ 'name': 'intelligent' })">智能面试</el-menu-item>
          <el-sub-menu v-if="isAdmin" index="admin">
            <template #title> 管理</template>
            <el-menu-item index="user-manage" @Click="router.push({ 'name': 'admin' })">用户管理</el-menu-item>
            <el-menu-item index="bank-manage" @Click="router.push({ 'name': 'admin' })">题库管理</el-menu-item>
            <el-menu-item index="question-manage" @Click="router.push({ 'name': 'admin' })">题目管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="user-center" style="margin-left: auto">
            <template #title>
              <UserCard :username="( loginUser == null || loginUser.userName == null ) ? '未命名用户' : loginUser.userName"
                :user-avatar="(loginUser == null || loginUser.userAvatar == null ) ? defaultAvatar : loginUser.userAvatar" />
            </template>
            <el-menu-item v-if="!isLogin" index="user-center" @click="login">登录</el-menu-item>
            <el-menu-item v-if="isLogin" index="user-center"
              @Click="router.push({ 'name': 'user-center' })">个人中心</el-menu-item>
            <el-menu-item v-if="isLogin" index="logout" @click="logout">退出登录</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-main>
        <RouterView />
      </el-main>
      <el-footer>
        <div class="copyright">© CodeRush 面试刷题平台</div>
        <div class="author">
          <el-link type="primary" href="https://www.zimucode.top/" target="_blank">作者: 自牧</el-link>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { RouterView } from 'vue-router'
import { onBeforeMount, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import UserCard from './components/UserCard.vue'
import { ElNotification } from 'element-plus'
import axiosInstance from './utils/request'
const router = useRouter()
const route = useRoute()
const loginUser = ref(null)
const isLogin = ref(false)
const defaultAvatar = ref('https://sns-avatar-qc.xhscdn.com/avatar/645b809d1b0ee4025dc47735.jpg?imageView2/2/w/120/format/webp|imageMogr2/strip')
const isAdmin = ref(true)
onBeforeMount(() => {
  if (localStorage.getItem('loginUser') != null) {
    loginUser.value = JSON.parse(localStorage.getItem('loginUser'))
    console.log('loginUser', loginUser.value)
    isLogin.value = true
  }
})
const login = () => {
  router.push({name: 'login'})
}
const logout = () => { //伪代码，需要修改为像后端发请求
  axiosInstance.post('/user/logout')
  localStorage.removeItem('loginUser')
  isLogin.value = false
  ElNotification({
    title: '成功',
    message: '您已成功退出',
    type: 'success',
  })
  router.push({ path: '/' })
}
</script>

<style scoped>
.body {
  background-color: rgb(245, 245, 245);
}

.common-layout {
  width: 100%;
  background-color: rgb(245, 245, 245);
}

.el-container {
  display: flex;
  flex-direction: column;

}

.el-header {
  height: 5vh;
}

.el-menu {
  display: flex;
  justify-content: flex-start;
  background-color: rgb(245, 245, 245);
}

.el-menu--horizontal {
  --el-menu-horizontal-height: 5vh;
}

.el-main {
  min-height: 85vh;
  display: flex;
  /* align-items: center; */
  flex-direction: column;
  align-items: center;

}

.el-footer {
  height: 10vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
}

.el-link {
  margin-right: 8px;
  font-size: 12px;
}
</style>
